<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .operate{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100px;
			background-color: #ccc;
			width: 100%;
		}
        .operate input{
			font-size: 30px;
		}
		.operate input[type=text]{
			width: 100%;
		}
    </style>
</head>
<body>
    <h1>小小聊天室 欢迎：<span id="user"><%=username%></span></h1>
    <div>
        <ul class="list"></ul>
    </div>
    <div class="operate">
        <input type="text" id="content">
    </div>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
    <script>
        var socket = io();
        $("#content").keydown(function(e){
            // 把文本框内容上传
            if(e.keyCode == 13){
                    socket.emit("chat",{
                    "content": $("#content").val(),
                    "user": $("#user").html()
                });
                $(this).val("");
            }
        });
        socket.on("chat",function(msg){
            $(".list").prepend("<li><b>" + msg.user + "：</b>" + msg.content +"</li>");
        });
    </script>
</body>
</html>